<template>
    <div id="header">
        <el-header class="headder-box">
           <p > {{ time }}</p>
        </el-header>
    </div>
</template>

<script setup >
import { ref } from "vue";
const time = ref('')
const timeFn = () => {
    let vWeek, vWeek_s, vDay;
    vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let hours = date.getHours();

    let minutes = date.getMinutes();
    let seconds = date.getSeconds();
    vWeek_s = date.getDay();
    let a =seconds.toString();
    let seconds2 = a.padStart(2,'0')
    let b =minutes.toString();
    let minutes2 = b.padStart(2,'0')
    let c =hours.toString();
    let hours2 = c.padStart(2,'0')
    time.value = year + "年" + month + "月" + day + "日" + "\t" + hours2 + ":" + minutes2 + ":" + seconds2 + "\t" + vWeek[vWeek_s];
};
setInterval(timeFn, 100)
</script>
<style scoped lang="scss">
.headder-box {
    height: 65px;
    // border: 1px solid #D4D7DE;
    display: flex;
    align-items: center;
    p{
        color:#D4D7DE;
        padding: 5px;
    }
}
#header{
   background-image: url("../../assets/images/xinkong.jpg");
   background-repeat: repeat;
//    background-size: cover;
   animation: backgroundAnimation 30s linear infinite; 
}
@keyframes backgroundAnimation {  
  0% {background-position: 0 0;}  
//   50% {background-position: 100% 0;}  
  100% {background-position: 100% 0;}  
} 
</style>